<template>
    <!-- 拒绝退货 & 修改理由 弹窗 -->
    <ayjDialog ref="dialogRef" :title="title" :width="'30%'">
        <view class="cate-content">
            <!-- <view class="item-fixed-top">
                <view class="title">{{ title }}</view>
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view> -->
            <view class="cate-list">
                <view class="info">
                    <view class="name">{{
                        info && info.name ? info.name : ""
                    }}</view>
                    <view class="price">
                        {{ act == "pay_out" ? "退货金额：" : "本单欠款："
                        }} <span class="font_red bold">{{ oMom || '0.00' }}</span></view
                    >
                </view>
                <view class="ipt-box" style="padding: 6px 20px;">
                    <view class="i-title">{{
                        act == "pay_out"
                            ? "退款金额"
                            : typepay == "1"
                            ? "付款金额"
                            : "收款金额"
                    }}</view>
                    <view class="price-input-box flex_row">
                        <!-- <span class="bold font_size18 font_black3">￥</span> -->
                        <el-input
                            class="ipt-val price-input"
                            v-model="info.money"
                            @input="entPrice"
                        ></el-input>
                    </view>
                </view>
                <view class="ipt-box" v-show="info.money > 0">
                    <view class="i-title">{{
                        act == "pay_out"
                            ? "退款方式"
                            : typepay == "1"
                            ? "付款方式"
                            : "收款方式"
                    }}</view>

                    <!-- <el-radio-group v-model="padyId">
                        <el-radio class="mb10" :label="item.title" v-for="(item,index) in payList" :key="item.id">{{item.title}}</el-radio>
                    </el-radio-group> -->

                    <view
                        class="ipt-val cur-point"
                        @click="togglePriceMask('show')"
                        >{{ trading }}</view
                    >
                    <text
                        class="icon-font cur-point"
                        @click="togglePriceMask('show')"
                        >&#xe600;</text
                    >
                </view>
                <view class="ipt-box">
                    <dateTimePicker
                        :title="timeTitle"
                        :visible="showTimePicker"
                        @changeTime="changeTime"
                    ></dateTimePicker>
                </view>
                <view
                    class="ipt-box"
                    v-if="(act == 'pay_in' && info.type == 1) || info.type == 2"
                >
                    <view class="i-title">{{
                        info.type == 1 ? "客户余额" : "我的余额"
                    }}</view>
                    <view class="ipt-val">{{ myMoney }}</view>
                    <view class="uni-list-cell uni-list-cell-pd">
                        <switch @change="switchMon" />
                    </view>
                </view>
                <view class="ipt-box">
                    <view class="i-title">备注</view>
                    <input
                        class="ipt-val"
                        type="text"
                        @input="entTxt"
                        :value="txt"
                        placeholder="请输入备注"
                        placeholder-style="font-size:13px"
                    />
                </view>
            </view>

            <!-- 选择支付方式 -->
            <view
                class="mask"
                @click="togglePriceMask"
                :class="
                    priceMaskState === 0
                        ? 'none'
                        : priceMaskState === 1
                        ? 'show'
                        : ''
                "
            >
                <view class="comm-list mask-content">
                    <view
                        class="item"
                        v-for="(item, index) in payList"
                        :key="index"
                        :class="{ active: index == priceIndex }"
                        @click="selPriceWay(item, index)"
                    >
                        {{ item.title }}
                    </view>
                </view>
            </view>
            <view class="btn" @click="submit">完成</view>
        </view>
    </ayjDialog>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import util from "../../js/util/Util.js";
import config from "../../js/conf/Config.js";
import dateTimePicker from "../comm/dateTimePicker.vue";
import { priceInput } from '@/utils/common.js'

export default {
    components: { dateTimePicker },
    data() {
        return {
            timeTitle: "业务时间",
            act: "",
            title: "收款",
            openShow: 0,
            oMom: 0,
            info: {
                money: 0,
                name: "",
                type: 1,
            },

            money: "", //退款/收款金额

            trading: "请选择交易方式", //交易方式
            padyId: "",
            time: "请选择业务时间", //业务时间
            timeTxt: "", //提交时间
            txt: "", //备注
            priceIndex: -1,
            payList: [],
            priceMaskState: 0, //选择支付方式状态
            odid: -1,
            callBack: null,
            typepay: "",
            orderType: "",
            myMoney: 0,
            isUserMyMoney: false,

            showTimePicker: false,

            payType: "",
        };
    },
    methods: {
        /*** 选择业务时间 ***/
        kxdatetime(e) {
            this.date = e;
        },

        /*** 输入金额 ***/
        entPrice(e) {
            this.info.money = priceInput(e);
        },

        /*** 输入备注 ***/
        entTxt(e) {
            this.txt = e.detail.value;
        },

        /*** 选择交易方式 ***/
        selPriceWay(item, index) {
            if (this.priceIndex == index) return;
            this.priceIndex = index;
            this.trading = item.title;
            this.padyId = item.id;
            if (item.paytype) this.payType = item.paytype;
            else this.payType = "";
        },

        togglePriceMask(type) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.priceMaskState = 2;
            setTimeout(() => {
                this.priceMaskState = state;
            }, timer);
        },

        /**显示分类面板 type:0付款记录，1：操作记录**/
        toggleBillsStateMask(type, data) {
            console.log("toggleBillsStateMask====:", type, data);
            if(type == "close"){
                this.$refs.dialogRef.close();
            }else{
                this.$refs.dialogRef.open();
            }

            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) {
                this.showTimePicker = false;
                return;
            }

            this.act = data.act;
            if (this.act == "pay_out") {
                this.title = "退款";
            } else if (data.typepay == "1") {
                this.title = "付款";
                if (data.money_my) this.myMoney = data.money_my;
            } else {
                this.title = "收款";
                if (data.money_my) this.myMoney = data.money_my;
            }

            this.oMom = this.money = this.info.money = data.amount_notpay;
            if (data.customer_info) {
                this.info.name = data.customer_info.name;
                this.info.type = 1;
            } else if (data.supper_info) {
                this.info.name = data.supper_info.name;
                this.info.type = 2;
            } else {
                this.info.name = "散客";
                this.info.type = 0;
            }
            this.odid = data.odid;
            // this.payList = data.pay_ls;
            this.setPayList(data);
            this.orderType = data.type;
            this.typepay = data.typepay;
            this.callBack = data.callBack;
            console.log("data.pay_ls====:", data.pay_ls);
            this.txt = "";
        },

        setPayList(data) {
            if (data.pay_ls_sys) {
                this.payList = [];
                let len = data.pay_ls_sys.length;
                for (let i = 0; i < len; i++) {
                    let obj = data.pay_ls_sys[i];
                    let temp = {};
                    temp.id = obj.payid;
                    temp.title = obj.title;
                    temp.type = obj.type;
                    temp.paytype = obj.paytype;
                    this.payList.push(temp);
                }
            }

            if (data.pay_ls) {
                let len = data.pay_ls.length;
                for (let i = 0; i < len; i++) {
                    let obj = data.pay_ls[i];
                    if (obj.status != 1) continue;
                    let temp = {};
                    temp.id = obj.id;
                    temp.title = obj.title;
                    temp.cpid = obj.cpid;
                    this.payList.push(temp);
                }
            }
        },

        close() {
            this.toggleBillsStateMask('close',{});
        },

        changeTime(txt) {
            this.timeTxt = txt;
        },

        switchMon(e) {
            console.log(e);
            this.isUserMyMoney = e.detail.value;
        },

        submit() {
            if (!this.isUserMyMoney && this.info.money <= 0) {
                this.$msg({
                    title:
                        this.act == "pay_out"
                            ? "退款" + "金额，必须大于0"
                            : this.typepay == 1
                            ? "付款" + "金额，必须大于0"
                            : "收款" + "金额，必须大于0",
                });
                return;
            }

            // if(this.act == "pay_out" && this.money > this.info.money)
            // {
            // 	this.$msg({title:"退款不能大于应退金额"});
            // 	return;
            // }

            // if (
            //     (!this.isUserMyMoney && this.padyId == "") ||
            //     (this.myMoney <= 0 && this.isUserMyMoney)
            // ) {
            //     this.$msg({ title: "请填选择支付方式！" });
            //     return;
            // }

            if (this.isUserMyMoney && !Number(this.info.money)) {
                // 重置未选中的支付方式数据
                this.payType = "";
                this.priceIndex = -1;
                this.trading = "请选择交易方式";
                this.padyId = "";

            } else if (Number(this.info.money) && this.isUserMyMoney && this.padyId == ""  ) {
                this.$msg({ title: "请填选择支付方式！" });
                return;
            } else if ( this.padyId == ""  ) {
                this.$msg({ title: "请填选择支付方式！" });
                return;
            }
            
            let obj = {};
            obj.act = this.act;
            obj.odid = this.odid;
            obj.type = this.orderType;
            obj.amount_receive = this.info.money;
            obj.payid = this.padyId;
            obj.atime_txt = this.timeTxt;
            obj.paytype = this.payType;
            if (this.act == "pay_in") {
                if (this.isUserMyMoney) {
                    obj.money = this.myMoney;
                }
            }
            obj.txt = this.txt;
            if (this.callBack != null) {
                this.callBack.call(null, obj);
                this.callBack = null;
            }
            this.toggleBillsStateMask('close',{});
        },
    },
};
</script>
<style lang="scss">
.mask {
    // display: flex;
    // align-items: flex-end;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    transition: 0.3s;
    .mask-content {
        box-sizing: border-box;
        width: 100%;
        max-height: 250px;
        background: #f3f3f3;
        transform: translateY(180%);
        transition: 0.3s;
        .item {
            border-bottom: 1px solid #ececec;
            padding: 10px 20px;
        }
        .active {
            color: #3388ff;
        }
    }
    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.4);
        .mask-content {
            transform: translateY(163%);
        }
    }
}
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 500px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 16px;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
.bg-color {
    background: #e6e6e6;
    padding: 10px;
}
.cate-list {
    height: 500px;
    .info {
        padding: 20px;
        background: #f2f2f2;
        .name {
            font-size: 18px;
        }
        .price {
            font-size: 14px;
            text {
                margin-left: 10px;
                color: red;
            }
        }
    }
    .ipt-box {
        border-bottom: 1px solid #ececec;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        position: relative;
        .i-title {
            width: 80px;
        }
        .ipt-val {
            flex: 1;
        }
        .price-input-box > span,.price-input {
            vertical-align: baseline;
        }


        .price-input-box ::v-deep .el-input__inner {
            border: none !important;
            padding-top: 4px !important;
            padding-left: 2px !important;
            font-size: 18px !important;
            font-weight: bold !important;
        }
            
        .price-input {
           font-weight: 600;
           font-size: 16px;
           color: #333;
        }
        .cur-point {
            cursor: pointer;
        }
        text {
            position: absolute;
            right: 10px;
            color: #999;
        }
    }
}
.btn {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3388ff;
    color: #fff;
    font-size: 16px;
    z-index: 999;
    cursor: pointer;
}
</style>